<template>
<body id="poster">
  <el-form class="login-container" label-position="left" label-width="0px">
    <h3 class="login_title">修改密码</h3>
    <el-form-item>
      <el-input class="login_input" type="password" v-model="password1" placeholder="新密码"></el-input>
    </el-form-item>

    <el-form-item>
      <el-input class="login_input" type="password" v-model="password2" placeholder="再次输入新密码"></el-input>
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;margin-top:20px;border: none" @click.native.prevent="reset">更改密码</el-button>
    </el-form-item>
  </el-form>
</body>
</template>

<script>
import axios from 'axios'
export default {
  name: "resetPwd",
  data() {
    return {
      password1: "",
      password2: "",
      userId: "",
      responseResult: []
    };
  },

  mounted() {
  },
  created(){
            var userId = localStorage.getItem('u_id');
            this.userId = userId
  },

  methods: {
    reset(){
      if(this.password1.length<6||this.password2.length<6){
          this.$message.error("密码不能小于6位")
      }else{
          if(this.password1!==this.password2){
          this.$message.error("两次密码不一致")
      }else{
            // put请求
          let data = {
            userId: this.userId,
            newPass:this.password2
          }
      axios.put('/tips/users/pass', data).then(res => {
        if(res.data.code===20008){
          this.$message({
          message: '密码修改成功，请重新登录！',
          type: 'success',
          duration:2000
        });
        localStorage.removeItem('u_name');
        localStorage.removeItem('u_id');
        this.$router.push('/login');
        }
    })

      }
      }

    },

    


}
}
</script>
<style>
#poster {
  background: url("/images/img3.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body {
  margin: 0px;
  padding: 0;
}

.login-container {
  width: 350px;
  height: 250px;
  padding: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -200px;
  background-color: rgba(240, 255, 255, 0.5);
  border-radius: 10px;
  text-align: center;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
